import React from 'react'
import { Flex } from 'antd-mobile'
import styles from './index.module.scss'
import PropTypes from 'prop-types'
import { withRouter } from 'react-router-dom'
import classNames from 'classnames'

function SearchBar ({ cityName, history, className }) {
  return (
    <Flex className={classNames(styles.root, className)}>
      <Flex className={styles.searchLeft}>
        <div
          className={styles.location}
          onClick={() => history.push('/citylist')}
        >
          <span>{cityName}</span>
          <i className='iconfont icon-arrow'></i>
        </div>
        <div className={styles.searchForm}>
          <i className='iconfont icon-search'></i>
          <span>请输入小区或地址</span>
        </div>
      </Flex>
      <i onClick={() => history.push('/map')} className='iconfont icon-map'></i>
    </Flex>
  )
}

SearchBar.propTypes = {
  cityName: PropTypes.string.isRequired
}

export default withRouter(SearchBar)
